Styling your Web site
Introduction
Once you have developed your style sheet, previewed it in browsers to make sure that it works well, you now need to apply it to your web site.
Style sheets can be applied to web sites in one of two ways:
- style sheets can be embedded in HTML documents
- HTML documents can be linked to style sheets
In this chapter we will look at linking web pages to style sheets, embedding style sheets in web pages, and editing style sheets embedded in HTML documents.
Linking
Linking is the preferred way of applying a style sheet to a web page, for reasons we will be looking at shortly.
When a web page is linked to a style sheet, the style sheet remains completely independent from the HTML document. A special kind of link, placed in the HEAD of an HTML document, informs a browser reading the web page that there is a style sheet that should be used when drawing the web page, and where to locate it.
To link a web page to a style sheet using Style Master
firstly, make sure that the style sheet you want to link to is the front style sheet in Style Master
1. choose from the menu
the open dialog box opens
2. locate the web page you want to link to this style sheet, and click
Style Master places a special link in the head of the HTML document you choose. If the web page is already linked to a style sheet, Style Master replaces the link.
The HTML document is not affected in any other way. No other part of the HTML is altered. The creator of the HTML file remains as it was before the link was created. So, if it was a Dreamweaver document before, it remains a Dreamweaver document.
To link an entire site to a style sheet
1. open style sheet you want to link to and make it the front window
2. choose from the menu (you can also control clock the style sheet window to open a contextual menu and choose from there, if you have MacOS 8.0 or later)
3. the open dialog box opens. In it, choose any HTML file at the top level of the site you want to link, and click . Style Master will link any HTML files at this level, and search any folders (and their subfolders etc.) contained in the folder containing the file you selected, linking HTML files that it finds there.
4. Style Master will ask you whether you really want to link to all the pages it has located. It will tell you how many there will be. This is to ensure that you don't link to many thousands accidently, by choosing the wrong folder.
Use this feature with care. Style Master will replace every link to an external style sheet with the one you are linking in every page contained inside this collection of HTML files. It is not undoable.
Embedding
Rather than linking a web page, you can embed the style sheet into the head of a HTML document. The contents of the style sheet are placed inside a special Style element in the Head of the HTML document
To embed a style sheet in the Head of a HTML document
firstly, make sure that the style sheet you want to link to is the front style sheet in Style Master
1. choose from the menu
the open dialog box opens
2. locate the web page you want to embed this style sheet in, and click open
Style Master places the contents of the style sheet in the head of the HTML document, in a Style element. If a style sheet is already embedded in the document, Style Master replaces that style sheet.
The HTML document is not affected in any other way. No other part of the HTML is altered. The creator of the HTML file remains as it was before the link was created. So, if it was a Dreamweaver document before, it remains a Dreamweaver document.
Why is linking preferred?
To change the style of web sites using linked style sheets, you can simply edit the style sheet, and every page linked to the style sheet is instantly updated. Where embedding is used to apply style, a change to a style sheet needs to be re-embedded in every page of the web site. This gives rise to problems of versioning- ensuring that every page of a web site is edited to have the new style sheet embedded in place of the old one. It also creates considerably more work.
A further reason why embedded style sheets are best avoided becomes important if you use cascading, background images, or list item images. Each of these is specified by an absolute URL, or a URL relative to the style sheet. If a style sheet is embedded in the web page, then web pages in different folders need different style sheets, because the relative URL for imported style sheets or images will be different in different folder. In large web sites, this creates a lot more work, and potential for confusion.
Editing a style sheet in the head of an HTML document
Once a style sheet is embedded in the HEAD of a HTML document, you can in fact still edit it with Style Master. Style Master lets you open HTML documents, and if there is a style sheet embedded in its head, to edit that as if it were a more common .css file.
To edit a style sheet embedded in the head of an HTML document
1. choose from the menu
2. locate the HTML document to open in the Open dialog box and click
Style Master will ask you whether you want to edit the style sheet in the head of the HTML document
3.Click
A style sheet window opens, listing the statements in the style sheet in the head of the HTML document. You edit this style sheet as you would any style sheet using Style Master. When changes are saved, these are saved in the head of the HTML document.
.dmg/Shareware World/Comms & Internet/Style Master 1.2 ppc/sm_manual/images/home_flesh.gif){kind=small}